<template>
    <div class="myfollows">
  <myheader title="我的关注">
      <template #left>
        <van-icon name="arrow-left" @click="$router.go(-1)" />
      </template>
    </myheader>
   <div class="list"> 
    <div class="box" v-for="(item,index) in followList" :key="item.id">
        <img :src="item.head_img" alt="">
        <div class="center">
            <p>{{item.nickname}}</p>
            <span>2019-9-9</span>
        </div>
        <span @click="unfollowUser(item.id,index)">取消关注</span>
    </div>
</div> 

  </div>
</template>

<script>
import myheader from "@/components/myheader";
import{getFollowList,unfollowUser} from '../apis/user'
import axios from '@/utils/request'
export default {
    data () {
        return {
          followList:[]  
        }
    },
    components:{
        myheader
    },
    mounted(){
        getFollowList()
            .then(res=>{
                this.followList = res.data.data.map(v=>{
                    v.head_img = axios.defaults.baseURL + v.head_img
                    return v
                })
            })
    },
    methods:{
        unfollowUser(id,index){
            unfollowUser(id)
            .then(res=>{
                this.$toast.success(res.data.message)
                this.followList.splice(index,1)
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .list{
    .box{
        display: flex;
        padding: 25px 10px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        > img{
            display: block;
            width: 50/360*100vw;
            height: 50/360*100vw;
            border-radius: 50%;
            padding: 0 10px;
        }
        > .center{
            flex: 1;
            > p {
                line-height: 30px;
                font-size: 14px;
            }
            > span {
                font-size: 12px;
                color:#999;
            }
        }
        > span {
            height: 30px;
            background-color: #eee;
            font-size: 13px;
            border-radius: 30px;
            line-height: 30px;
            padding: 0px 15px;
        }
    }
}
</style>